@use '@material/ripple';

:host {
  .mdc-toggle__background {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 15px;
    height: 15px;
    border: none;
    color: var(--mdc-theme-on-primary);
  }

  .mdc-toggle__checkmark-path {
    transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
    stroke: currentcolor;
    stroke-width: 3.12px;
    stroke-dashoffset: 29.7833;
    stroke-dasharray: 29.7833;
  }

  .showCheck {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

:host([width='fill']) {
  width: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  row-gap: 8px;
  width: var(--width);
  height: var(--height);
  border: solid 2px var(--mdc-theme-border);
  border-radius: 8px;
  color: var(--mdc-theme-text-primary-on-background);
  @include ripple.surface;
  @include ripple.radius-unbounded;
  @include ripple.states;
}

.container::after,
.container::before {
  border-radius: 8px;
}

.container:hover {
  cursor: pointer;
}

.cornerFill {
  background: linear-gradient(
    225deg,
    var(--mdc-theme-primary) 28px,
    transparent 0
  );
}

.checked {
  --mdc-theme-text-icon-on-background: var(--mdc-theme-primary);

  border: solid 2px var(--mdc-theme-primary);
  background-color: var(--mdc-theme-surface-primary-highlight);
  font-variation-settings: 'FILL' 1;
}

.checked:hover {
  background-color: var(--mdc-theme-surface-primary-highlight-hover);
}

[name='icon']::slotted(*) {
  font-size: 40px;
  color: var(--mdc-theme-text-icon-on-background);
}

[name='text']::slotted(*) {
  color: var(--mdc-theme-text-primary-on-background);
  font-family: var(--mdc-typography-body1-font-family);
  font-size: var(--mdc-typography-body1-font-size);
  font-weight: var(--mdc-typography-body1-font-weight);
  line-height: var(--mdc-typography-body1-line-height);
  letter-spacing: 0.4px;
}

[name='text']::slotted(*:last-child) {
  color: var(--mdc-theme-text-secondary-on-background);
  font-family: var(--mdc-typography-body2-font-family);
  font-size: var(--mdc-typography-body2-font-size);
  font-weight: var(--mdc-typography-body2-font-weight);
  line-height: var(--mdc-typography-body2-line-height);
}
